<template>
    <div class="dashboard-editor-container">
        <!-- <github-corner class="github-corner" /> -->

        <panel-group @handleSetLineChartData="handleSetLineChartData" />

        <div class="lay-centre card">
            <line-chart :series-data="lineChartData.seriesData" :legend-data="lineChartData.legendData" height="100%" width="100%" />
        </div>

        <div class="lay-buttom">
            <el-row :gutter="15" style="height:100%">
                <el-col :xs="24" :sm="24" :lg="8" style="height:100%">
                    <div class="chart-wrapper card">
                        <raddar-chart :series-data="raddarChartData.seriesData" :redir-indicator="raddarChartData.redirIndicator"
                            :legend-data="raddarChartData.legendData" />
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8" style="height:100%">
                    <div class="chart-wrapper card">
                        <pie-chart :series-data="pieChartData.seriesData" :legend-data="pieChartData.legendData" />
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8" style="height:100%">
                    <div class="chart-wrapper card">
                        <bar-chart :series-data="barChartData.seriesData" :x-axis-data="barChartData.xAxisData"
                            :legend-data="barChartData.legendData" :stack="barChartData.stack" />
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from '@/components/Charts/LineMarker'
import RaddarChart from '@/components/Charts/RaddarChart'
import PieChart from '@/components/Charts/PieChart'
import BarChart from '@/components/Charts/BarChart'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'

const lineChartData = [
    {
        name: 'newVisitis',
        data: [120, 82, 91, 154, 162, 140, 145, 120, 82, 91, 154, 162, 140, 145]
    },
    {
        name: 'messages',
        data: [180, 160, 151, 106, 145, 150, 130, 160, 151, 106, 145, 150, 130]
    },
    {
        name: 'purchases',
        data: [120, 90, 100, 138, 142, 130, 130, 100, 138, 142, 130, 130]
    }
]

export default {
    name: 'DashboardAdmin',
    components: {
        // GithubCorner,
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart,
        TodoList,
        BoxCard
    },
    data () {
        return {
            lineChartData: {
                seriesData: lineChartData,
                legendData: ['newVisitis', 'messages', 'purchases']
            },
            raddarChartData: { // 雷达图数据
                redirIndicator: [ // 六个角
                    { name: '销售', max: 10000 },
                    { name: '管理', max: 20000 },
                    { name: '信息技术', max: 20000 },
                    { name: '用户支持', max: 20000 },
                    { name: '开发', max: 20000 },
                    { name: '促销', max: 20000 }
                ],
                legendData: ['预算', '支出1', '实际'], // 图例
                seriesData: [{ // 图表数据
                    value: [5000, 7000, 12000, 11000, 15000, 14000],
                    name: '预算'
                },
                {
                    value: [4000, 9000, 15000, 15000, 13000, 11000],
                    name: '支出1'
                },
                {
                    value: [5500, 11000, 12000, 15000, 12000, 12000],
                    name: '实际'
                }]

            },
            // 饼状图数据
            pieChartData: {
                seriesData: {
                    name: '',
                    data: [
                        { value: 320, name: 'Industries' },
                        { value: 240, name: 'Technology' },
                        { value: 149, name: 'Forex' },
                        { value: 100, name: 'Gold' }
                    ]
                },
                legendData: ['Industries', 'Technology', 'Forex', 'Gold']
            },
            // 柱状图的数据
            barChartData: {
                stack: true, // 柱状图是否叠罗汉 true 为 叠罗汉
                legendData: ['pageA', 'pageB', 'pageC'],
                xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                seriesData: [{
                    name: 'pageA',
                    barWidth: '40%',
                    data: [79, 52, 200, 334, 390, 330, 220]
                }, {
                    name: 'pageB',
                    barWidth: '40%',
                    data: [80, 52, 200, 334, 390, 330, 220]
                }, {
                    name: 'pageC',
                    barWidth: '40%',
                    data: [30, 52, 200, 334, 390, 330, 220]
                }]
            }
        }
    },
    methods: {
        handleSetLineChartData (type) {
            this.lineChartData = lineChartData[type]
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    height: 100%;
    // padding: 15px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .lay-centre {
        height: calc(50% - 69px);
        margin-bottom: 15px;
    }
    .lay-buttom {
        height: calc(50% - 69px);
    }

    .github-corner {
        position: absolute;
        top: 0px;
        border: 0;
        right: 0;
    }

    .chart-wrapper {
        height: 100%;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
</style>
